<template>
  <div class="population">
    <div>
      <a-checkbox :checked="maxAwardType" @change="maxAwardChange"> 集团卡等级 </a-checkbox>
      <div>
        <div v-if="maxAwardType">
          <template v-for="t in tags">
            <a-checkable-tag :key="t.code" :checked="selectedTags.indexOf(t.code) > -1" @change="checked => handleTagChange(t.code, checked)" class="edit-line">
              {{ t.title }}
            </a-checkable-tag>
          </template>
        </div>
      </div>
    </div>
    <div>
      <a-checkbox :checked="storeGroupType" @change="groupChange"> 指定门店会员 </a-checkbox>
      <div style="display: flex; align-items: center" v-if="storeGroupType">
        <!-- <a-button type="primary" @click="importClick">导入门店</a-button> -->
        <a-upload accept=".xls,.xlsx" name="file" :beforeUpload="beforeUpload" :isMultiple="false" @change="handleChange">
          <a-button type="primary" icon="import">导入</a-button>
        </a-upload>
        <a-button @click="exportClick" style="margin-left: 8px">下载模板</a-button>
        <span class="edit-font">&nbsp;&nbsp;多次导入门店，以最后一次导入数据为准</span>
      </div>
      <a-table
        size="default"
        :rowKey="record => record.id"
        :columns="columns"
        :dataSource="dataInfo"
        v-if="storeGroupType"
        :pagination="paginationProps"
        bordered
        @change="handleTableChange"
        :loading="confirmLoading"
      >
        <span slot="action" slot-scope="text, record">
          <template>
            <a @click="deleteClick(record.id)">删除</a>
          </template>
        </span>
      </a-table>
    </div>
    <div>
      <a-checkbox :checked="crowdType" @change="crowdChange" > 人群包 </a-checkbox>
      <a-select v-model="crowdList" placeholder="请选择参活人群包" mode="multiple" v-if="crowdType"   :getPopupContainer="triggerNode => triggerNode.parentNode" @change="selectChange">
        <a-select-option v-for="item in packageList" :key="item.peoplePackageId" :value="item.peoplePackageId"> {{ item.groupName }}</a-select-option>
      </a-select>
      <div class="edit-font">注：多选人群条件，取交集人群生效</div>
    </div>
    <div class="bullet" v-if="bullet">
      <p>
        共成功导入{{ paginationProps.total }}条数据!
        </br> 
        <span  v-if="repeat>0">{{repeat}}条数据有重复</span>
      </p>
     
    
    
    </div>
    <a-modal v-model="visible" centered :width="350" :footer="null">
      <div style="margin-top:10px;">共成功导入{{ paginationProps.total }}条数据！</br> 
      <span v-if="repeat>0">  {{repeat}}条数据有重复 </br> </span>
      {{queryNum}}条数据有误（点击下载完整数据）</br> 

     <div style="margin-bottom:12px;">{{queryData}}</div>
      </div>
      <div >
        <a-button style="margin-right:15px;" @click="() => (visible = false)"> 取消 </a-button>
        <a-button type="primary" @click="download"> 下载模版 </a-button>
      </div>
    </a-modal>
  </div>
</template>
<script>
import { storeDelete, storeList, storeImport, packageInit, queryTemplate, errorTemplate } from '@/api/marketingCenter/passenger.js'
const columns = [
  {
    title: '店仓编号',
    dataIndex: 'storeCode',
    align: 'center'
  },
  {
    title: '店仓名称',
    dataIndex: 'storeName',
    align: 'center'
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: '240px',
    align: 'center',
    fixed: 'right',
    scopedSlots: { customRender: 'action' }
  }
]
import { STable, Ellipsis } from '@views/box/components'
export default {
  components: {
    STable,
    Ellipsis
  },
  props: {
    storeGroupId: String,
    populationId: String,
    dataList: {
      type: Array,
      default: null
    },
    infoList: {
      type: Array,
      default: null
    }
  },

  data() {
    return {
      bullet: false,
      visible: false,
      confirmLoading: false,
      queryNum: '',
      columns,
      fileList: [],
      dataInfo: [],
      selectedTags: [],
      packageList: [],
      repeat: 0,
      tags: [
        {
          code: '106',
          title: '集团银卡'
        },
        {
          code: '107',
          title: '集团金卡'
        },
        {
          code: '108',
          title: '集团白金卡'
        },
        {
          code: '172',
          title: '集团铂金卡'
        }
      ],
      crowdList: [],
      queryData: [], // 导入失败内容
      checked1: false,
      maxAwardType: null,
      storeGroupType: null,
      crowdType: null,
      paginationProps: {
        current: 1,
        pageSize: 5,
        total: 0,
        showTotal: total => `共有 ${total} 条数据`
      },
      queryParam: {
        groupId: '', //门店id
        current: 1,
        pageSize: 5
      }
    }
  },
  watch: {
    dataList(value, oldvalue) {
      if (value) {
        this.selectedTags = value
        this.maxAwardType = true
        this.$emit('maxAwardType', this.maxAwardType)
        this.$emit('selectedTags', this.selectedTags)
      }
    },
    infoList(value, oldvalue) {
      if (value) {
        this.crowdList = value
        this.crowdType = true
        this.$emit('crowdType', this.crowdType)
        this.$emit('crowdChange', this.crowdList)
      }
    },
    storeGroupId(value, oldvalue) {
      if (value) {
        this.queryParam.groupId = this.storeGroupId
        this._store()
        this.storeGroupType = true
      }
    }
  },
  created() {
    this.package()
  },
  methods: {
    selectChange() {
      this.$emit('crowdChange', this.crowdList)
    },
    download() {
      window.location.href = errorTemplate + `?groupId=${this.queryParam.groupId}`
    },
    maxAwardChange(e) {
      let maxAward = e.target.checked ? '1' : '0'
      this.maxAwardType = e.target.checked
      this.$emit('maxAwardType', this.maxAwardType)
      if (maxAward == '0' && this.selectedTags.length > 0) {
        this.$emit('maxAwardType', this.maxAwardType)
      }
    },
    groupChange(e) {
      let maxAward = e.target.checked ? '1' : '0'
      this.storeGroupType = e.target.checked
      this.$emit('storeGroupType', this.storeGroupType)
      if (maxAward == '0' && this.dataInfo.length > 0) {
        this.$emit('storeGroupType', this.storeGroupType)
      }
    },
    crowdChange(e) {
      let maxAward = e.target.checked ? '1' : '0'
      this.crowdType = e.target.checked
      this.$emit('crowdType', this.crowdType)
      this.$emit('crowdChange', this.crowdList)
      if (maxAward == '0' && this.crowdList.length > 0) {
        this.$emit('crowdType', this.crowdType)
      }
    },
    handleTableChange(pagination) {
      this.paginationProps.current = pagination.current
      this.paginationProps.pageSize = pagination.pageSize
      this.queryParam.current = pagination.current
      this.queryParam.size = pagination.pageSize
      this._store()
    },
    _store() {
      storeList(this.queryParam).then(res => {
        if (res.code === 200) {
          this.dataInfo = res.data.records
          this.$emit('dataChange', res.data.records)
          const paginationProps = { ...this.paginationProps }
          paginationProps.total = res.data.total
          this.paginationProps = paginationProps
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    package() {
      packageInit().then(res => {
        if (res.code === 200) {
          // console.log(res.data)
          this.packageList = res.data
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    beforeUpload(file) {
      this.fileList = [...this.fileList, file]
      return false
    },
    handleChange(info) {
      this.confirmLoading = true
      if (info.fileList.length > 1) {
        info.fileList.splice(0, 1)
      }
      if (this.fileList.length > 1) {
        this.fileList.splice(0, 1)
      }
      let formData = new FormData()
      formData.append('file', this.fileList[0])
      storeImport(formData).then(res => {
        if (res.code === 200) {
          this.confirmLoading = false
          this.queryParam.groupId = res.data.groupId //门店id

          if (res.data.wrongNumber == 0) {
            this.bullet = true
            if (res.data.repeat != 0) {
              this.repeat = Number(res.data.repeat)
            }
            setTimeout(() => {
              this.bullet = false
            }, 5000)
          } else {
            this.visible = true
            this.failInfo(res.data.groupId)
            if (res.data.repeat != 0) {
              this.repeat = Number(res.data.repeat)
            }
          }
          this.$emit('storeGroupId', res.data.groupId)
          setTimeout(() => {
            this._store()
          }, 6000)
          // this._store() //门店列表
        } else {
          this.confirmLoading = false
          this.$message.error(res.msg)
        }
      })
    },
    failInfo(groupId) {
      queryTemplate(groupId).then(res => {
        if (res.code === 200) {
          this.queryNum = res.data.length
          this.queryData = res.data ? res.data.toString() : res.data
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 下载模版
    exportClick() {
      window.open('https://jnbyoss.oss-cn-hangzhou.aliyuncs.com/upload/20220801/add6b2e6dc6d106d28ac3b54982b5ab6.xls')
    },
    deleteClick(id) {
      storeDelete(id).then(res => {
        if (res.code === 200) {
          this.$message.success('删除成功')
          // this.queryParam.current = 1
          // this.paginationProps.current = 1

          if (this.dataInfo.length == 1) {
            this.queryParam.current = 1
            this.paginationProps.current = 1
          }
          this._store()
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    handleTagChange(tag, checked) {
      const { selectedTags } = this
      const nextSelectedTags = checked ? [...selectedTags, tag] : selectedTags.filter(t => t !== tag)
      this.selectedTags = nextSelectedTags
      this.$emit('selectedTags', this.selectedTags)
    }
  }
}
</script>
<style  scoped lang="less">
.population {
  min-width: 550px;
  min-height: 50px;
  background-color: #f2f2f2;
  padding: 12px;
  position: relative;
}
/deep/ .ant-tag {
  line-height: 24px !important;
}
/deep/ .ant-table-body {
  background: #fff;
}
.edit-font {
  color: #aaaaaa;
  font-size: 12px;
}
.edit-line {
  border: 1px solid #ccc;
}
/deep/ .ant-upload-list {
  display: none !important;
}
.bullet {
  width: 300px;
  height: 150px;
  background-color: black;
  position: absolute;
  top: 43%;
  left: 37%;
  z-index: 6666;
  opacity: 0.6;
  color: #fff;
  text-align: center;
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
</style>